<template>
	<container-item title="录波解析" hasNav>
		<div class="faultDiagnosis-warp">
			<div class="faultDiagnosis-warp-left">
				<div style="text-align: center">
					<button class="btn-nav-bg stripe-btn" @click="showDialog">
						导入文件
					</button>
				</div>

				<div style="
            color: #60d8de;
            font-size: 16px;
            font-weight: 700;
            line-height: 60px;
          ">
					导入历史记录
				</div>
				<ul>
					<li v-for="(item, index) in fileNameList" :key="index" :title="item.name"
						:class="[current === index ? 'active' : 'normal']"
						@click="changeFile(item.name, item.result, index)">
						{{ item.name }}
					</li>
				</ul>
			</div>
			<div class="faultDiagnosis-warp-right">
				<label class="btn-nav-bg stripe-btn" @click="index = 0"
					:class="[index === 1 ? 'normal' : '']">波形分析</label>
				<label class="btn-nav-bg stripe-btn" @click="index = 1"
					:class="[index === 0 ? 'normal' : '']">数据分析</label>
				<div class="tab-warpper" v-if="index === 0 && faultTime.xAxis.length > 0">
					<div class="tab-content">
						<div class="tab-content-left">
							<div class="lineBox">
								<div style="
                    color: #60d8de;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 60px;
                    text-align: center;
                  ">
									{{ fileName }}
								</div>
								<div class="line-container">
									<div class="line-name">故障<br />时间</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isLength="false" :datas="faultTime.data" :xAxis="faultTime.xAxis"
										:isAxisLabel="false" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障<br />指令</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isLength="false" :datas="faultDirect.data" :xAxis="faultDirect.xAxis"
										:isAxisLabel="false" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障<br />返回值</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isLength="false" :datas="faultReturned.data" :xAxis="faultReturned.xAxis"
										:isAxisLabel="false" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障时<br />模块状态1</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isAxisLabel="false" :isLength="false" :datas="faultStatus1.data"
										:xAxis="faultStatus1.xAxis" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障时<br />模块状态2</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:datas="faultStatus2.data" :xAxis="faultStatus2.xAxis" :isAxisLabel="false"
										:isLength="false" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障时<br />模块状态3</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isLength="false" :datas="faultStatus3.data" :xAxis="faultStatus3.xAxis"
										:isAxisLabel="false" :isShowTooltip="false"></linebar>
								</div>
								<div class="line-container">
									<div class="line-name">故障时<br />电压</div>
									<linebar class="line-width" :grid="grid" :axisLabelColor="'rgba(198,211,236)'"
										:isLength="false" :datas="faultVoltage.data" :xAxis="faultVoltage.xAxis"
										xAxisName="模块号" :tooltipFormatter="faultVoltage.tooltipFormatter"></linebar>
								</div>
							</div>
						</div>
						<div class="tab-content-right">
							<ul class="legend">
								<li v-for="(item, idx) in legendList" :key="idx">
									<i :style="{ background: item.background }"></i>
									{{ item.name }}
								</li>
							</ul>
							<el-descriptions :column="1" border>
								<el-descriptions-item :label="item.label" :label-class-name="item.labelClassName"
									:content-class-name="item.contentClassName" v-for="(item, idx) in List" :key="idx">
									{{ item.content }}
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</div>
				</div>
				<div class="table-box" v-if="index === 1">
					<el-form class="form-search" :model="form" inline>
						<el-form-item label="模块故障号">
							<el-input v-model="form.faultNO"></el-input>
						</el-form-item>
						<el-form-item label="">
							<div>
								<label class="btn-nav-bg stripe-btn" @click="handleSearch">查 询</label>
							</div>
						</el-form-item>
					</el-form>
					<page-table :tableData="datas" :tableLabel="columns" :table-height="tableHeight"></page-table>
				</div>
			</div>
		</div>

		<!--    导入文件-->
		<pub-dialog title="导入文件" top="10vh" type="default" :dialogVisible="dialogVisible"
			dialogVisableRef="dialogVisible" @switchVisable="switchVisable" btnType="0">
			<!--      :accept="'.DATA'"-->
			<el-upload class="upload-demo" drag :action="action" :auto-upload="false" ref="upload"
				:on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload" list-type="text"
				:limit="1" :file-list="upLoadFileList">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">点击上传</div>
				<div class="el-upload__tip" slot="tip">请导入数据文件(.DATA)结尾</div>
				<div slot="file" slot-scope="{ file }">
					<div class="el-upload-list__item-preview">
						<div>{{ file.name }}</div>
						<div>
							<label class="btn-nav-bg stripe-btn" @click="submitUpload">进行分析</label>
							<label class="btn-nav-bg stripe-btn" @click="handleRemove(file)">删除</label>
						</div>
					</div>
				</div>
			</el-upload>
		</pub-dialog>
	</container-item>
</template>

<script>
import ContainerItem from "@/components/ContainerItem.vue";
import Linebar from "@/components/Linebar";
import PageTable from "@/components/PageTable";
import PubDialog from "@/components/pubDialog.vue";
import { getOscillateHistory } from "@/api/faultDiagnosis";
import { Loading } from "element-ui";

export default {
	name: "Index",
	components: {
		ContainerItem,
		Linebar,
		PageTable,
		PubDialog,
	},
	data() {
		return {
			action: "",
			current: 0,
			dialogVisible: false,
			form: {
				faultNO: "",
			},
			columns: [
				{ label: "故障时间", param: "time" },
				{ label: "时间差(us)", param: "timeDifference" },
				{ label: "生成指令", param: "createValue" },
				{ label: "返回指令", param: "returnedValue" },
				{ label: "运行指令", param: "runState" },
				{ label: "电流方向", param: "directionCurrent" },
				{ label: "模块电压", param: "voltage" },
				{ label: "模块故障信息", param: "faultInfo" },
			],
			datas: [],
			date: [], //列表原始数据
			// pager: {
			//   pageSize: 10, // 每页数据量
			//   currentPage: 1, // 分页  当前页
			//   total: 0, //列表总数
			// },
			tableHeight: 400,
			fileNameList: [],
			index: 0,
			grid: {
				containLabel: true,
				left: "1%",
				top: "10%",
				right: "8%",
				bottom: "4%",
			},
			faultTime: {
				data: [
					{
						type: "line",
						name: "故障时间",
						color: "#5087ec",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultDirect: {
				data: [
					{
						type: "line",
						name: "故障指令",
						color: "#ba962e",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultReturned: {
				data: [
					{
						type: "line",
						name: "故障返回值",
						color: "#49d274",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultStatus1: {
				data: [
					{
						type: "line",
						name: "故障时模块状态1",
						color: "#9f9f43",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultStatus2: {
				data: [
					{
						type: "line",
						name: "故障时模块状态2",
						color: "#9c2d2d",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultStatus3: {
				data: [
					{
						type: "line",
						name: "故障时模块状态3",
						color: "#e23737",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
			},
			faultVoltage: {
				data: [
					{
						type: "line",
						name: "故障时电压",
						color: "#bc6fb0",
						showSymbol: false,
						smooth: false,
						data: [],
					},
				],
				xAxis: [],
				tooltipFormatter: function (params) { },
			},
			List: [
				{
					label: "当前游标位置",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "moduleNum",
				},
				{
					label: "告警点",
					content: "告警子模块数",
					labelClassName: "my-label-header",
					contentClassName: "my-content-header",
				},
				{
					label: "故障时间",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "time",
				},
				{
					label: "生成指令",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "createValue",
				},
				{
					label: "返回指令",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "returnedValue",
				},
				{
					label: "运行指令",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "runState",
				},
				{
					label: "电流方向",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "directionCurrent",
				},
				{
					label: "模拟电压",
					content: "",
					labelClassName: "my-label",
					contentClassName: "my-content",
					params: "voltage",
				},
			],
			legendList: [
				{
					name: "故障时间",
					background: "#5087ec",
				},
				{
					name: "故障指令",
					background: "#ba962e",
				},
				{
					name: "故障返回值",
					background: "#49d274",
				},
				{
					name: "故障时模块状态1",
					background: "#9f9f43",
				},
				{
					name: "故障时模块状态2",
					background: "#9c2d2d",
				},
				{
					name: "故障时模块状态3",
					background: "#e23737",
				},
				{
					name: "故障时电压",
					background: "#bc6fb0",
				},
			],
			fileName: "",
			load: "",
			upLoadFileList: [], //上传的文件
		};
	},
	created() {
		this.getOscillateHistory();
	},
	mounted() {
		let baseUrl = process.env.NODE_ENV === "production"
			? window.productiontIp
			: window.developmentIp;
		this.action = baseUrl + "/oscillate/upload";
	},
	methods: {
		calcHeight() {
			this.tableHeight = window.innerHeight - 300;
		},
		//导入历史记录
		getOscillateHistory() {
			getOscillateHistory().then((res) => {
				if (res.code === 20000) {
					const fileHistory = [];
					res.data.map((item) => {
						fileHistory.push({
							name: item.fileName,
							result: item.result,
						});
					});
					this.fileNameList = fileHistory;
					if (this.fileNameList.length > 0) {
						this.changeFile(
							this.fileNameList[0].name,
							this.fileNameList[0].result,
							0
						);
					}
				}
			});
		},
		//上传图片之前
		beforeUpload(file) {
			this.upLoadFileList.push(file.name);
		},
		switchVisable(visable, ref) {
			this[ref] = visable;
		},
		showDialog() {
			this.dialogVisible = true;
			this.upLoadFileList = [];
		},
		submitUpload() {
			this.$refs.upload.submit();
			this.load = Loading.service({
				lock: true,
				text: "文件分析中",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
		},
		handleRemove(file, fileList) {
			this.upLoadFileList = [];
		},
		handleSuccess(response, file, fileList) {
			this.dialogVisible = false;
			const data = response.data;
			// // 波形分析

			this.oscillogram(data.oscillogram);
			this.datas = data.date;
			this.date = data.date;
			this.load.close();
			this.fileName = this.upLoadFileList[0];
		},

		//波形分析数据
		oscillogram(data) {
			// 波形分析
			this.faultTime.xAxis = [];
			this.faultTime.data[0].data = [];
			this.faultDirect.xAxis = [];
			this.faultDirect.data[0].data = [];
			this.faultReturned.xAxis = [];
			this.faultReturned.data[0].data = [];
			this.faultStatus1.xAxis = [];
			this.faultStatus1.data[0].data = [];
			this.faultStatus2.xAxis = [];
			this.faultStatus2.data[0].data = [];
			this.faultStatus3.xAxis = [];
			this.faultStatus3.data[0].data = [];
			this.faultVoltage.xAxis = [];
			this.faultVoltage.data[0].data = [];
			data.map((item) => {
				this.faultTime.xAxis.push(item.moduleNum);
				this.faultTime.data[0].data.push(item.time);
				this.faultDirect.xAxis.push(item.moduleNum);
				this.faultDirect.data[0].data.push(item.createValue);
				this.faultReturned.xAxis.push(item.moduleNum);
				this.faultReturned.data[0].data.push(item.returnedValue);
				this.faultStatus1.xAxis.push(item.moduleNum);
				this.faultStatus1.data[0].data.push(item.stateOne);
				this.faultStatus2.xAxis.push(item.moduleNum);
				this.faultStatus2.data[0].data.push(item.stateTwo);
				this.faultStatus3.xAxis.push(item.moduleNum);
				this.faultStatus3.data[0].data.push(item.stateThree);
				this.faultVoltage.xAxis.push(item.moduleNum);
				this.faultVoltage.data[0].data.push(item.voltage);
			});
			const that = this;
			this.faultVoltage.tooltipFormatter = function (params) {
				let result = params[0].marker + params[0].name + "<br>";
				data.map((item) => {
					if (item.moduleNum == params[0].name) {
						result +=
							"故障时间" +
							item.time +
							"<br>" +
							"生成指令" +
							item.createValue +
							"<br>" +
							"返回指令" +
							item.returnedValue +
							"<br>" +
							"运行指令" +
							item.runState +
							"<br>" +
							"电流方向" +
							item.directionCurrent +
							"<br>" +
							"模拟电压" +
							item.voltage;
						const contentAry = [
							params[0].name,
							"告警子模块数",
							item.time,
							item.createValue,
							item.returnedValue,
							item.runState,
							item.directionCurrent,
							item.voltage,
						];
						that.List.map((j, idx) => {
							j.content = contentAry[idx];
						});
					}
				});

				// return result
			};
		},

		//历史文件记录点击
		changeFile(name, result, index) {
			this.fileName = name;
			this.oscillogram(result.oscillogram);
			this.datas = result.date;
			this.date = result.date;
			this.current = index;
		},
		//查询
		handleSearch() {
			if (this.date.length > 0) {
				this.datas = [];
				this.date.map((item) => {
					if (this.form.faultNO == item.moduleNum) {
						this.datas.push(item);
					}
				});
			}
		},
	},
};
</script>

<style scoped lang="less">
.faultDiagnosis-warp {
	display: flex;
	justify-content: space-between;
	height: 100%;
}

.faultDiagnosis-warp-left {
	width: 300px;
	height: 100%;
	//background-color: #073c46;
	background: linear-gradient(-69.7deg, #091318, #203136);
	border: 1px solid #006686;
	padding: 20px;

	ul {
		li {
			height: 42px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;

			&:first-child {
				border-top: 1px solid #40e5f0;
			}

			&.active {
				color: #40e5f0;
			}

			border-bottom: 1px solid #40e5f0;
			color: #c6d3ec;
			line-height: 42px;
			margin: 0 -20px;
			padding: 0 20px;

			&.normal {
				color: #c6d3ec;
			}
		}
	}
}

.faultDiagnosis-warp-right {
	width: calc(100% - 320px);
	height: 100%;
	//background-color: #073c46;
	background: linear-gradient(-69.7deg, #091318, #203136);
	border: 1px solid #006686;
	padding: 20px;
}

.tab-warpper {
	height: calc(100% - 40px);

	.tab-content {
		height: 100%;
		display: flex;
		justify-content: space-between;

		.tab-content-left {
			height: 100%;
			width: calc(100% - 400px);

			.lineBox {
				height: calc(100% - 60px);
			}

			.line-container {
				height: calc(14% - 16px);
				margin-bottom: 20px;
				display: flex;

				.line-name {
					color: #c6d3ec;
					width: 80px;
					display: flex;
					align-items: center;
					text-align: center;
					justify-content: center;
					line-height: 20px;
				}

				.line-width {
					width: calc(100% - 80px);
				}
			}
		}

		.tab-content-right {
			height: calc(100% - 60px);
			padding-top: 60px;
			width: 400px;
			display: flex;
			justify-content: space-between;

			.legend {
				li {
					height: 30px;
					color: #c6d3ec;
				}

				i {
					display: inline-block;
					height: 10px;
					width: 10px;
					margin-right: 10px;
				}
			}
		}
	}
}

.btn-nav-bg.stripe-btn.normal {
	background-color: #41596f;
	border-color: #41596f;
}

.table-box {
	margin-top: 20px;
}

.form-search {
	.el-form-item {
		margin-bottom: 15px;
	}
}

.upload-demo {
	text-align: center;

	.el-upload__tip {
		font-size: 14px;
		color: #c6d3ec;
	}
}
</style>
<style lang="less">
.my-content {
	background-color: #011c29;
	color: #c6d3ec;
	border: 1px solid #3e517c !important;
}

.my-label {
	background-color: #011c29 !important;
	color: #c6d3ec !important;
	border: 1px solid #3e517c !important;
}

.my-label-header,
.my-content-header {
	background-color: #011c29 !important;
	color: rgb(96, 216, 222) !important;
	border: 1px solid #3e517c !important;
}

.el-upload-dragger {
	background: #247382;
}

.el-upload-dragger .el-upload__text {
	color: #c6d3ec;
}

.el-upload-list.el-upload-list--text {
	text-align: left !important;
}

.el-upload-list__item-preview {
	display: flex;
	justify-content: space-between;
	color: #c6d3ec;
}

.el-upload-list__item:hover {
	background-color: transparent;
}
</style>
